<template>
    <div class="app-container">
        <el-form label-position="right" :model="formLabelAlign" ref="ruleFormRef">
            <el-card style="margin-bottom: 20px;" class="box-card">
                <el-descriptions title="员工信息" :column="4" direction="vertical" border>
                    <el-descriptions-item label="员工类型">
                        <el-form-item prop="usertype" label="">
                            <el-select :disabled="true" style="width: 100%;" v-model="formLabelAlign.taxPayer"
                                placeholder="员工类型">
                                <el-option label="居民纳税人" :value="1" />
                                <el-option label="非居民纳税人" :value="2" />
                                <el-option label="实习生" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="姓名">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '姓名不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="name">
                            <el-input :disabled="true" v-model="formLabelAlign.name" placeholder="姓名" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="工号">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '工号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="jobNumber">
                            <el-input :disabled="true" v-model="formLabelAlign.jobNumber" placeholder="工号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        <el-form-item :rules="[
                            {
                                required: true,
                                pattern: /^[0-9]{11}$/,
                                message: '手机号为11位填数字',
                                trigger: 'blur',
                            },
                        ]" prop="mobile">
                            <el-input :disabled="true" v-model="formLabelAlign.mobile" placeholder="手机号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="岗位">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '岗位不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="job">
                            <el-input :disabled="true" v-model="formLabelAlign.job" placeholder="岗位" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="岗位属性">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '岗位属性不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="jobAttributes">
                            <el-input :disabled="true" v-model="formLabelAlign.jobAttributes" placeholder="岗位属性" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="部门">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '部门不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="department">
                            <el-input :disabled="true" v-model="formLabelAlign.department" placeholder="部门" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="职务">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '职务不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="position">
                            <el-input :disabled="true" v-model="formLabelAlign.position" placeholder="职务" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="入职时间">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '入职时间不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="entryTime">
                            <el-date-picker :disabled="true" style="width: 100%;" v-model="formLabelAlign.entryTime"
                                type="date" placeholder="选择入职时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item label="职级">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '职级不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="level">
                            <el-input :disabled="true" v-model="formLabelAlign.level" placeholder="职级" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="是否离职">
                        <el-form-item prop="isLeave">
                            <el-select :disabled="true" style="width: 100%;" v-model="formLabelAlign.isLeave"
                                placeholder="是否离职">
                                <el-option label="未离职" :value="false" />
                                <el-option label="已离职" :value="true" />
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="formLabelAlign.isLeave" label="离职时间">
                        <el-form-item prop="leaveTime">
                            <el-date-picker :disabled="true" style="width: 100%;" v-model="formLabelAlign.leaveTime"
                                type="date" placeholder="选择离职时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="证件号">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '证件号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="idCard">
                            <el-input :disabled="true" v-model="formLabelAlign.idCard" placeholder="证件号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="收款人姓名">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '收款人姓名不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="payee">
                            <el-input :disabled="true" v-model="formLabelAlign.payee" placeholder="收款人姓名" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="银行卡号">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '银行卡号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="bankCard">
                            <el-input :disabled="true" v-model="formLabelAlign.bankCard" placeholder="银行卡号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="开户行">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '开户行不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="bankName">
                            <el-input :disabled="true" v-model="formLabelAlign.bankName" placeholder="开户行" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="公积金号">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '公积金号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="gjjh">
                            <el-input :disabled="true" v-model="formLabelAlign.gjjh" placeholder="公积金号" />
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card style="margin-bottom: 20px;" class="box-card">
                <el-descriptions title="考勤信息" :column="4" direction="vertical" border>
                    <el-descriptions-item label="日期">{{ formLabelAlign.year }}-{{ formLabelAlign.month
                    }}</el-descriptions-item>
                    <el-descriptions-item label="基本薪资">{{ formLabelAlign.basicSalary }}</el-descriptions-item>
                    <el-descriptions-item label="减除费用">{{ formLabelAlign.deduction }}</el-descriptions-item>
                    <el-descriptions-item label="出勤天数">{{ formLabelAlign.attendanceDays }}</el-descriptions-item>
                    <el-descriptions-item label="病假天数">{{ formLabelAlign.sickLeave }}</el-descriptions-item>
                    <el-descriptions-item label="事假天数">{{ formLabelAlign.businessLeave }}</el-descriptions-item>
                    <el-descriptions-item label="扣病假工资">{{ formLabelAlign.deductionLeave }}</el-descriptions-item>
                    <el-descriptions-item label="扣事假工资">{{ formLabelAlign.deductionLeave2 }}</el-descriptions-item>
                    <el-descriptions-item label="应发工资">{{ formLabelAlign.shouldPay }}</el-descriptions-item>
                    <el-descriptions-item label="累计应纳税所得额">{{ formLabelAlign.totalTaxPayed }}</el-descriptions-item>
                    <el-descriptions-item label="累计个人所得税">{{ formLabelAlign.totalPersonTaxed }}</el-descriptions-item>
                    <el-descriptions-item label="本期个人所得税">{{ formLabelAlign.personTaxed }}</el-descriptions-item>
                    <el-descriptions-item label="本月工资">{{ formLabelAlign.monthSalary }}</el-descriptions-item>
                    <el-descriptions-item label="本月实发数">{{ formLabelAlign.monthPayed }}</el-descriptions-item>
                    <el-descriptions-item label="本月专项扣除">{{ formLabelAlign.monthDeduction }}</el-descriptions-item>
                    <el-descriptions-item label="本月专项附加扣除">{{ formLabelAlign.monthDeductionAdd }}</el-descriptions-item>
                    <el-descriptions-item label="本月税前收入其他加项">{{ formLabelAlign.monthIncomeAdd }}</el-descriptions-item>
                    <el-descriptions-item label="本月税前收入其他减项">{{ formLabelAlign.monthIncomeMinus }}</el-descriptions-item>
                    <el-descriptions-item label="本月税后收入其他加项">{{ formLabelAlign.monthIncomeAdd2 }}</el-descriptions-item>
                    <el-descriptions-item label="本月税后收入其他减项">{{ formLabelAlign.monthIncomeMinus2 }}</el-descriptions-item>
                    <el-descriptions-item label="本月扣除项合计">{{ formLabelAlign.totalDeduction }}</el-descriptions-item>
                    <el-descriptions-item label="福利合计">{{ formLabelAlign.totalWelfare }}</el-descriptions-item>
                    <el-descriptions-item label="代扣合计">{{ formLabelAlign.totalDeduction2 }}</el-descriptions-item>
                </el-descriptions>

            </el-card>
            <el-card style="margin-bottom: 20px;" class="box-card">
                <el-descriptions title="扣除列表" :column="4" direction="vertical" border>
                    <el-descriptions-item v-for="(item, index) of filteredList" :key="index" :label="item.name">{{
                        item.amount
                    }}
                    </el-descriptions-item>
                </el-descriptions>

            </el-card>
            <el-form-item>
                <el-button @click="closeTag()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "wagesEdit"
}
</script>
<script setup>
import { getAttendanceInfo, getAttendanceInfoStaffDeduction, attendanceUpdate, postAddstaff } from '@/api/api';
import useCloseTag from '@/hooks/useCloseTag'
import { parseTime } from '@/utils';
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router';
const activeName = ref('first')
const ruleFormRef = ref()
const { closeTag } = useCloseTag()


const formLabelAlign = reactive({
    remark: "",
    eductionList: []
})
const eductionList = ref([])
const filteredList = computed(() => {
    return eductionList.value.filter(item => {
        if (Number(item.amount) > 0) return item;

    });
})
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            await attendanceUpdate({
                ...formLabelAlign,
            })
            ElMessage.success('保存成功！')

        } else {
            console.info(fields)
            ElMessage.error('请查看您填写的参数是否正确！')

        }
    })

}

async function checkoutFn() {
    await attendanceUpdate({
        id: formLabelAlign.id,
        status: true
    })
    listFn()
    ElMessage.success('结账成功！')
}
if (useRoute().query.id) {
    formLabelAlign.id = useRoute().query.id
    listFn()
} else {

}

async function getAttendanceInfoStaffDeductionFn(year, month, jobNumber) {
    let { data } = await getAttendanceInfoStaffDeduction({
        jobNumber,
        year,
        month,
    })
    eductionList.value = data
}
async function listFn() {
    let { data: list } = await getAttendanceInfo({
        id: formLabelAlign.id,
    })
    // list.eductionList = list.staffDeduction
    Object.assign(formLabelAlign, list)
    getAttendanceInfoStaffDeductionFn(list.year, list.month, list.jobNumber)
}
</script>

<style></style>
